<template>
  <a-card :bordered="false" title="">
    <a-page-header title="话术库设置">
      <a-button style="margin-right: 10px" type="primary" @click="handleAddTemplate">新增</a-button>
      <a-button type="primary" @click="handleBatchDelete">删除</a-button>
      <a-modal
        :visible="deleteVisible"
        :confirm-loading="confirmLoading"
        @ok="handleDeleteTemplate"
        @cancel="handleCancel2"
        width="350px"
      >
        <span>确定删除内容？</span>
      </a-modal>
    </a-page-header>
    <a-divider />
    <a-tabs :active-key="type" @change="handleChange">
      <a-tab-pane v-for="pane in panes" :key="pane.dataId">
        <template slot="tab">
          {{ pane.categoryName }}
          <a-icon type="edit" style="margin-left: 10px" @click.stop="handleEditType(pane)" />
          <a-popconfirm title="该分类内所有话术将清空，是否确认删除？" @confirm.stop="() => handleDeleteType(pane)">
            <a-icon type="delete" />
          </a-popconfirm>
        </template>

        <a-spin :spinning="loading">
          <a-list :data-source="activities">
            <a-list-item slot="renderItem" slot-scope="item" style="position:relative;padding: 12px 50px 12px 15px">
              <a-checkbox v-model="item.checked" style="margin-right: 13px" />
              <span style="word-wrap:break-word;white-space:normal;width:calc(100% - 34px)">{{
                item.suggestContent
              }}</span>
              <img
                src="~@/assets/edit.png"
                class="hover"
                style="width: 16px; height:16px;position: absolute;right: 15px;"
                @click="handleEditTemplate(item)"
              />
            </a-list-item>
          </a-list>
        </a-spin>
      </a-tab-pane>
      <a-tab-pane key="addBtn">
        <template slot="tab">
          <a-icon type="plus" @click="handleAddType" />
        </template>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      :visible="editVisit"
      :title="title"
      ref="editVisit"
      width="500px"
      @ok="handleOk"
      @cancel="handleCancel"
      :confirm-loading="typeConfirmLoading"
    >
      <a-form-model ref="editform" :model="category" :rules="validatorRules">
        <a-form-model-item label="分类名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 8 }" prop="categoryName">
          <a-input v-model="category.categoryName" :max-length="10"> </a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <suggestion-modal :isEdit="isEdit" ref="suggestionModalForm" @ok="suggestionModalFormOk"></suggestion-modal>
    <!-- <project-modal ref="projectModalForm" @ok="projectModalFormOk"></project-modal> -->
  </a-card>
</template>

<script>
import { getAction, postAction, deleteAction } from '@/api/manage'
import SuggestionModal from './modules/SuggestionModal'
import { mapGetters } from 'vuex'
// import ProjectModal from './modules/ProjectModal'

export default {
  components: { SuggestionModal },
  data() {
    return {
      dataLoading: true,
      loading: false,
      deleteVisible: false,
      confirmLoading: false,
      typeConfirmLoading: false,
      panes: [],
      category: {},
      isEdit: false,
      title: '服务分类新增',
      editVisit: false,
      type: null,
      activities: [],
      validatorRules: {
        categoryName: [{ required: true, message: '请填写分类名称' }]
      }
    }
  },
  computed: {},
  created() {
    this.getType(1)
  },
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    getType(type) {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.panes = res.result
          if (type == 1) {
            this.type = this.panes[0].dataId
          } else if (type == 2) {
            this.type = this.panes[this.panes.length - 1].dataId
          }
          this.getList(this.type)
        } else {
          console.log(res.message)
        }
      })
    },
    getList(type) {
      this.loading = true
      postAction('/201/02/2010214', { signinType: type, doctorId: this.doctorId(), orgCode: this.orgCode() })
        .then(res => {
          if (res.success) {
            this.activities = res.result.map(v => {
              return { ...v, checked: false }
            })
          } else {
            console.log(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleAddType() {
      this.editVisit = true
      this.title = '服务分类新增'
      this.category.orgCode = this.orgCode()
    },
    handleEditType(item) {
      this.editVisit = true
      this.title = '服务分类编辑'
      this.category = item
    },
    handleDeleteType(item) {
      deleteAction('/suggest/category/delete', {
        id: item.dataId
      }).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.type = null
          this.getType(1)
        } else {
          console.log(res.message)
        }
      })
    },
    handleOk() {
      this.typeConfirmLoading = true
      this.$refs.editform.validate(valid => {
        if (valid) {
          postAction('/suggest/category/save', {
            dataId: this.category.dataId,
            orgCode: this.category.orgCode,
            categoryName: this.category.categoryName
          })
            .then(res => {
              if (res.success) {
                this.$message.success('操作成功')
                this.getType(2)
                this.handleCancel()
              } else {
                console.log(res.message)
              }
            })
            .finally(() => {
              this.typeConfirmLoading = false
            })
        }
      })
    },
    handleCancel() {
      this.editVisit = false
      this.category = {}
    },
    handleAddTemplate() {
      if (this.panes.length == 0) {
        this.$message.warning('请先新建话术分类!')
        return
      }
      this.isEdit = false
      this.$refs.suggestionModalForm.add({ signinType: +this.type })
      this.$refs.suggestionModalForm.disableSubmit = false
    },
    handleEditTemplate(record) {
      this.isEdit = true
      const params = {
        suggestContent: record.suggestContent,
        signinType: record.signinType,
        dataId: record.dataId
      }
      this.$refs.suggestionModalForm.edit(params)
      this.$refs.suggestionModalForm.disableSubmit = false
    },
    handleDeleteTemplate() {
      this.confirmLoading = true
      const dataIds = this.activities.filter(v => v.checked).map(n => n.dataId)
      const params = {
        dataIds
      }
      postAction('201/02/2010216', params)
        .then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.getList(this.type)
          } else {
            this.$message.warning(res.message)
          }
          this.deleteVisible = false
        })
        .finally(res => {
          this.confirmLoading = false
        })
    },
    handleChange(e) {
      if (e === 'addBtn') {
        return false
      } else {
        this.type = e
        this.activities = []
        this.getList(e)
      }
    },
    suggestionModalFormOk() {
      this.getList(this.type)
    },
    handleAddProject() {
      this.$refs.projectModalForm.add()
      this.$refs.projectModalForm.title = '新增'
      this.$refs.projectModalForm.disableSubmit = false
    },
    handleEditProject(record) {
      this.$refs.projectModalForm.edit(record)
      this.$refs.projectModalForm.title = '编辑'
      this.$refs.projectModalForm.disableSubmit = false
    },
    handleBatchDelete() {
      const selectedList = this.activities.filter(v => {
        return v.checked
      })
      if (selectedList.length == 0) {
        this.$message.error('请选择模版')
      } else {
        this.deleteVisible = true
      }
    },
    handleCancel2(e) {
      this.deleteVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-page-header {
  padding: 0;
}
.ant-list-item {
  justify-content: flex-start;
}
.hover:hover {
  cursor: pointer;
}
</style>

